<script setup lang='ts'>
import { ref, watch } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import StackerReclaimerTable from './ui/StackerReclaimerTable.vue'
import DeviceTable from './ui/DeviceTable.vue'
import StructureTable from './ui/StructureTable.vue'
import TriaxialTable from './ui/TriaxialTable.vue'
import AnemometerTable from './ui/AnemometerTable.vue'
import InclinometerTable from './ui/InclinometerTable.vue'
import MeasurePointTable from './ui/MeasurePointTable.vue'
import HandMeasurePointTable from './ui/HandMeasurePointTable.vue'

const activeName = ref('first')
watch(activeName,(nv,ov) => {
  switch(nv){
  case 'first':
    stackerReclaimerTableRef.value.getStackerReclaimerData()
    break
  case 'second':
    deviceTablef.value.getDeviceData()
    break
  case 'third':
    structureTableRef.value.getStructureData()
    break
  case 'fourth':
    triaxialTableRef.value.getTriaxialData()
    break
  case 'fifth':
    anemometerTableRef.value.getAnemometerData()
    break
  case 'sixth':
    inclinometerTableRef.value.getInclinomenterData()
    break
  case 'seventh':
    measurePointTableRef.value.getMeasurePointData()
    break
  case 'eighth':
    handMeasurePointTableRef.value.getHandMeasurePointData()
    break
  }
})
// refs
const stackerReclaimerTableRef = ref()
const deviceTablef = ref()
const structureTableRef = ref()
const triaxialTableRef = ref()
const anemometerTableRef = ref()
const inclinometerTableRef = ref()
const measurePointTableRef = ref()
const handMeasurePointTableRef = ref()

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<template>
  <div class="diagnosis-detail-main-box">
    <div class="tabs-box">
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="堆取料机"
          name="first"
        >
          <StackerReclaimerTable ref="stackerReclaimerTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="设备"
          name="second"
        >
          <DeviceTable ref="deviceTablef" />
        </el-tab-pane>
        <el-tab-pane
          label="机构"
          name="third"
        >
          <StructureTable ref="structureTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="三轴"
          name="fourth"
        >
          <TriaxialTable ref="triaxialTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="风速仪"
          name="fifth"
        >
          <AnemometerTable ref="anemometerTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="倾角仪"
          name="sixth"
        >
          <InclinometerTable ref="inclinometerTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="测点"
          name="seventh"
        >
          <MeasurePointTable ref="measurePointTableRef" />
        </el-tab-pane>
        <el-tab-pane
          label="手持测点"
          name="eighth"
        >
          <HandMeasurePointTable ref="handMeasurePointTableRef" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang=scss>
.diagnosis-detail-main-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .tabs-box {
    width: 98%;
    height: 96%;

    /* border: 1px solid red; */
    box-shadow: #dbd9d9 0 0 0 1px;
  }
}
</style>
<style lang="scss">
/* .production-statistics-tabs {
  border: 1px solid red;
} */
</style>